<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        body { background-color: #ffffff; }
        .layuimini-form .layui-form-item > .layui-input-block > tip {
            display: inline-block;
            margin-top: 10px;
            line-height: 10px;
            font-size: 10px;
            color: #a29c9c;
        }
        .check-info .table-search-fieldset {
            margin: 0;
            border: 1px solid #e6e6e6;
            padding: 10px 20px 5px 20px;
            color: #6b6b6b;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form check-info">
    <div class="layui-row layui-col-space15">
        <fieldset class="table-search-fieldset">
            <legend>基本信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label required">编号</label>
                        <div class="layui-input-block">
                            <input type="text" name="id" placeholder="" value="" class="layui-input id">
                            <tip>系统自动生成</tip>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">车牌号</label>
                        <div class="layui-input-block">
                            <input type="text" name="license" placeholder="请输入车牌号" value="" class="layui-input license">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">车牌类型</label>
                        <div class="layui-input-block">
                            <input type="text" name="licenseType" placeholder="请输入车牌类型" value="" class="layui-input licenseType">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">违法时间</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input time" id="time" name="time" placeholder="yyyy-MM-dd HH:mm:ss" lay-key="6">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">违法类型</label>
                        <div class="layui-input-block">
                            <input type="text" name="illegalType" placeholder="请输入违法类型" value="" class="layui-input illegalType">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">违法描述</label>
                        <div class="layui-input-block">
                            <input type="text" name="illegalDscn" placeholder="请输入违法描述" value="" class="layui-input illegalDscn">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label required">车辆描述</label>
                        <div class="layui-input-block">
                            <input type="text" name="carDscn" placeholder="请输入车辆描述" value="" class="layui-input carDscn">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label required">车牌截图</label>
                        <div class="layui-input-block">
                            <img id="licenseScreen" src="" style="width:100px; height:30px;">
                            <input class="layui-input licenseScreen" readonly type="hidden" value=""/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">车速</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input speed" name="speed" placeholder="请输入车速">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">方向</label>
                        <div class="layui-input-block">
                            <input type="text" name="direction" placeholder="请输入行驶方向" class="layui-input direction">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">车道</label>
                        <div class="layui-input-block">
                            <input type="text" name="lane" placeholder="请输入行驶车道" class="layui-input lane">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
                    </div>
                </div>
            </div>
        </fieldset>
        <fieldset class="table-search-fieldset">
            <legend>抓拍取证</legend>
            <div style="margin: 10px 10px 10px 10px">
                <div class="layui-col-md6">
                    <video autoplay loop muted width="100%" height="300px" id="evidence-video">
                        <source src="http://localhost:8080/file-server/bd-video-1.mp4" type="video/mp4">
                    </video>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-xs6">
                            <img src="http://localhost:8080/file-server/bd-1.jpg" style="width:100%;height:150px;">
                        </div>
                        <div class="layui-col-xs6">
                            <img src="http://localhost:8080/file-server/bd-2.jpg" style="width:100%;height:150px;">
                        </div>
                        <div class="layui-col-xs6">
                            <img src="http://localhost:8080/file-server/bd-3.jpg" style="width:100%;height:150px;">
                        </div>
                        <div class="layui-col-xs6">
                            <img src="http://localhost:8080/file-server/bd-4.jpg" style="width:100%;height:150px;">
                        </div>
                    </div>
                </div>
            </div>
        </fieldset>
    </div>
</div>

<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'laydate'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$,
            laydate = layui.laydate;

        laydate.render({
            elem: '#time', type: 'datetime',
            format: 'yyyy-MM-dd HH:mm'
        });

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.confirm(JSON.stringify(data.field), {
                title: '请确认最终的提交信息'
            }, function () {
                // 配置一个透明的询问框
                parent.layer.msg('修改完成，数据已更新！', {
                    time: 3000, // 3s后自动关闭
                    btn: '确定'
                });
                // 关闭弹出层
                layer.close(index);
                var iframeIndex = parent.layer.getFrameIndex(window.name);
                parent.layer.close(iframeIndex);
            });
            return false;
        });
    });
</script>
</body>
</html>